<ui:composition template="/WEB-INF/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <ui:define name="head">
        <title>#{eventBean.event.name} Details</title>
        <f:metadata>
            <f:viewParam name="id" value="#{eventBean.eventId}" />
            <f:viewAction action="#{eventBean.loadEvent()}" />
        </f:metadata>
    </ui:define>

    <ui:define name="content">
        <div id="viewEventBox">
            <h1>Event Details</h1>
            <p:link outcome="invitationList" title="Invite users" rendered="#{eventBean.modifiableByCurrentUser}">
                <f:param name="faces-redirect" value="true" />
                <f:param name="eventId" value="#{eventBean.event.eventId}" />
                <p:graphicImage value="/resources/icons/mail_2_icon.png" height="48px"/>
            </p:link>
            <p:commandLink action="#{eventBean.delete()}" title="Delete event"
                           rendered="#{eventBean.modifiableByCurrentUser}">
                <p:graphicImage value="/resources/icons/trash_icon.png" height="48px"/>
            </p:commandLink>
            <p:link outcome="createModifyEvent" title="Modify event" rendered="#{eventBean.modifiableByCurrentUser}" >
                <f:param name="faces-redirect" value="true" />
                <f:param name="id" value="#{eventBean.event.eventId}" />
                <p:graphicImage value="/resources/icons/wrench_plus_2_icon.png" height="48px"/>
            </p:link>
            <p:outputPanel rendered="#{eventBean.viewableByCurrentUser or eventBean.event.public}" >
                <h:panelGrid columns="2">
                    <p:outputLabel value="Event Name" />
                    <p:outputLabel value="#{eventBean.event.name}" />
                    <p:outputLabel value="Date" />
                    <p:outputLabel value="#{eventBean.event.date.toLocaleString()}" />
                    <p:outputLabel value="City" />
                    <p:outputLabel value="#{eventBean.event.city}" />
                    <p:outputLabel value="Country" />
                    <p:outputLabel value="#{eventBean.event.country}" />
                    <p:outputLabel value="Scope" />
                    <p:outputLabel value="#{eventBean.event.scope}" />
                    <p:outputLabel value="Location Type" />
                    <p:outputLabel value="#{eventBean.event.locationType}" />
                    <p:outputLabel value="Bad Weather Threshold" />
                    <p:outputLabel value="#{eventBean.event.badWeatherThreshold}" />
                    <p:outputLabel value="Created by" />
                    <h:link value="#{eventBean.event.creator.username}" outcome="homeView">
                        <f:param name="username" value="#{eventBean.event.creator.username}" />
                    </h:link>
                </h:panelGrid>
                <p:outputPanel>
                    <h2>Participants</h2>
                    <p:dataScroller value="#{eventBean.event.participants}" var="user">
                        <h:link value="#{user.username}" outcome="homeView">
                            <f:param name="username" value="#{user.username}" />
                        </h:link>
                    </p:dataScroller>
                </p:outputPanel>
            </p:outputPanel>
            <p:outputPanel rendered="#{!eventBean.viewableByCurrentUser and eventBean.event.private}">
                <p:outputLabel value="Sorry, the event is private. You cannot see its details
                               unless you are either the creator or a participant" />
            </p:outputPanel>
        </div>
    </ui:define>
</ui:composition>